<script setup>
import { ref, defineExpose } from 'vue';
import { userLoginService } from '@/api/login'
import {CircleCloseFilled} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/index';
// 创建仓库
const userStore = useUserStore()

const formModel = ref({
  phone: '',
  password: ''
})

// 接收v-model传递的值
defineProps(['modelValue'])

const emit = defineEmits(['update:modelValue'])

const notShow = () => {
  emit('update:modelValue', false)
}
// 定义校验规则
const rules = {
  phone: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { len: 11, message: '手机号长度必须为11位', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\S{6,15}$/, message: '密码必须为6-15位', trigger: 'blur' }
  ]
}
// 获取DOM对象
const form = ref()
// 登录操作
const login = async () => {
  // 校验失败会自动提示
  await form.value.validate()
  const res = await userLoginService(formModel.value)
  // 解构 res.data.data
  const {
    token,
    nickName,
    avatar,
    id,
    phone,
    sex,
    intro,
    province,
    city
  } = res.data.data

  // 将解构出来的字段存储到用户仓库
  userStore.setToken(token)
  userStore.setNickName(nickName)
  userStore.setAvatar(avatar)
  userStore.setId(id)
  userStore.setPhone(phone)
  userStore.setSex(sex)
  userStore.setIntro(intro)
  userStore.setProvince(province)
  userStore.setCity(city)
  ElMessage.success('登录成功')
  emit('update:modelValue', false)
}
</script>

<template>
  <!-- 登录弹窗 -->
  <div class="mask animate__animated animate__fadeIn" v-if="modelValue">
    <div class="login-container animate__animated animate__zoomIn ">
      <div class="close-btn">
        <el-icon color="#fe455d" size="25px" @click="notShow">
          <CircleCloseFilled />
        </el-icon>
      </div>

      <div class="left">
        <div class="header-content">
          <div class="login-reason">登录后推荐更懂你的商品</div>
          <div class="img-container">
          </div>

        </div>
      </div>

      <div class="right">
        <div class="title">手机号登录</div>

        <div class="input-container">
          <el-form :model="formModel" :rules="rules" ref="form">
            <el-form-item class="phone" prop="phone">
              <span class="country-code">+86</span>
              <el-input v-model="formModel.phone" type="text" placeholder="输入手机号" />
            </el-form-item>

            <el-form-item class="password" prop="password">
              <span class="country-code"></span>
              <el-input v-model="formModel.password" :show-password="true" type="password" placeholder="请输入密码" />
            </el-form-item>

            <el-form-item>
              <el-button @click="login" class="submit">登录</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="footer">
          <div class="a-link">
            <span>点击注册</span>
            <span>忘记密码</span>
          </div>
          <el-divider>or</el-divider>

        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

.no-boder {
  border: none;
  outline: none;
  box-shadow: none;
}
.animate__animated {
    animation-fill-mode: both;
    animation-duration: 0.1s;
  }

// 登录弹窗部分
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 初始背景色透明 */
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  .animate__animated {
      animation-fill-mode: both;
      animation-duration: .5s;
    }
  .login-container {
    width: 800px;
    height: 480px;
    background-color: #fff;
    position: relative;
    border-radius: 16px;
    display: flex;
    transition: all .2s;
    
    .close-btn {
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
      transition: all .2s;
      &:hover {
        transform: scale(1.3);
      }
    }

    .left {
      width: 400px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .header-content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 40px 24px 16px;
        width: 100%;

        .login-reason {
          height: 48px;
          padding: 0 20px;
          background: rgba(61, 138, 245, 0.1);
          color: #3d8af5;
          border-radius: 999px;
          font-size: 16px;
          font-weight: 600;
          line-height: 120%;
          margin-bottom: 20px;
          max-width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .img-container {
          width: 300px;
          height: 250px;
          border-radius: 16px;
          margin-top: 18px;
          background-image: url('@/assets/彩玉.png');
          background-size: cover;
          /* 背景图片等比例缩放以覆盖整个元素 */
          background-position: center;
          /* 背景图片居中显示 */
          background-repeat: no-repeat;
          /* 背景图片不重复 */
          box-shadow: 0px 6px 20px rgba(98, 97, 97, 0.8);
        }
      }
    }

    .right {
      width: 400px;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding-top: 48px;
      border-left: 1px solid rgba(0, 0, 0, 0.1);

      .title {
        font-size: 20px;
        color: #333;
        font-weight: 600;
        line-height: 120%;
        height: 24px;
        margin-top: 5px;
      }

      .input-container {
        margin-top: 20px;
        padding: 16px 0;
        width: 305px;
        display: flex;
        flex-direction: column;

        .phone,
        .password {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          line-height: 22px;
          color: rgba(51, 51, 51, 0.8);
          height: 48px;
          background: rgba(0, 0, 0, 0.05);
          border-radius: 999px;
          margin-bottom: 25px;
          box-shadow: 0px 2px 10px rgba(98, 97, 97, 0.2);
          transition: border-color .2s;

          .country-code {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 26px;
            height: 100%;
            font-weight: 400;
            margin-left: 16px;
            margin-right: 15px;
            color: #333;

            &::after {
              position: absolute;
              left: 35px;
              content: "";
              height: 24px;
              width: 1px;
              background-color: rgba(0, 0, 0, 0.1);
            }
          }

        }

        .el-input {
          width: 220px;
          height: 100%;
          font-size: 17px;
          caret-color: #ff2442;

          // 输入框的样式调整
          :deep(.el-input__wrapper) {
            background-color: rgba(0, 0, 0, 0.0);
            box-shadow: none
          }
        }

        // 检验提示的位置
        :deep(.el-form-item__error) {
          left: 22%;
          top: 140%;
        }

        .submit {
          height: 48px;
          background: #fe455d;
          color: #fff;
          opacity: 1;
          border-radius: 999px;
          font-size: 20px;
          letter-spacing: 1rem;
          font-weight: 900;
          cursor: pointer;
          transition: all .2s;
          width: 100%;
          box-shadow: 0px 2px 10px rgba(98, 97, 97, 0.2);
          transition: all 0.2s;

          &:hover {
            transform: scale(1.05);
          }
        }
      }

    }

    .footer {
      width: 305px;

      // background-color: pink;
      .a-link {
        display: flex;
        justify-content: space-between;
        color: #747373;
        font-size: 13px;
      }
    }
  }
}


</style>